<template>
    <div class="hello">
        <!-- 1 -->
                    <h1>{{$store.getters.not_show}}</h1>
                    <a href="javascript:;" @click="$store.commit('switch_dialog')">点我</a>
                    <br>
                    <a href="javascript:;" @click="$store.dispatch('switch_dialog')">点我2</a>
        <!-- 1 -->

        <!-- 2 -->
        <!--        <h1>{{show}}</h1>-->
        <!--        <a href="javascript:;" @click="$store.commit('switch_dialog')">点我</a>-->
        <!--        <br>-->
        <!--        <a href="javascript:;" @click="$store.dispatch('switch_dialog')">点我2</a>-->
        <!-- 2 -->

        <!-- 3 -->
<!--        <h1>{{not_show}}</h1>-->
<!--        <a href="javascript:;" @click="switch_dialog">点我</a>-->
        <!-- 3 -->

    </div>
</template>

<script>
    import {mapState, mapGetters, mapActions} from 'vuex';

    export default {
        computed: {
            //这里的三点叫做 : 扩展运算符
            ...mapState({
                show: state => state.dialog.show
            }),
            ...mapGetters(['not_show'])
        },
        methods: {
            ...mapActions(['switch_dialog'])
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
